/*! normalize.css v1.1.3 | MIT License | git.io/normalize */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

/**
 * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
 * Known issue: no IE 6 support.
 */

[hidden] {
    display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

/**
 * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-size: 100%; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Address `font-family` inconsistency between `textarea` and other form
 * elements.
 */

html,
button,
input,
select,
textarea {
    font-family: sans-serif;
}

/**
 * Address margins handled incorrectly in IE 6/7.
 */

body {
    margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/**
 * Address font sizes and margins set differently in IE 6/7.
 * Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
 * and Chrome.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}

h6 {
    font-size: 0.67em;
    margin: 2.33em 0;
}

/**
 * Address styling not present in IE 7/8/9, Safari 5, and Chrome.
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
 */

b,
strong {
    font-weight: bold;
}

blockquote {
    margin: 1em 40px;
}

/**
 * Address styling not present in Safari 5 and Chrome.
 */

dfn {
    font-style: italic;
}

/**
 * Address differences between Firefox and other browsers.
 * Known issue: no IE 6/7 normalization.
 */

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

/**
 * Address styling not present in IE 6/7/8/9.
 */

mark {
    background: #ff0;
    color: #000;
}

/**
 * Address margins set differently in IE 6/7.
 */

p,
pre {
    margin: 1em 0;
}

/**
 * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
 */

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}

/**
 * Improve readability of pre-formatted text in all browsers.
 */

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/**
 * Address CSS quotes not supported in IE 6/7.
 */

q {
    quotes: none;
}

/**
 * Address `quotes` property not supported in Safari 4.
 */

q:before,
q:after {
    content: '';
    content: none;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* ==========================================================================
   Lists
   ========================================================================== */

/**
 * Address margins set differently in IE 6/7.
 */

dl,
menu,
ol,
ul {
    margin: 1em 0;
}

dd {
    margin: 0 0 0 40px;
}

/**
 * Address paddings set differently in IE 6/7.
 */

menu,
ol,
ul {
    padding: 0 0 0 40px;
}

/**
 * Correct list images handled incorrectly in IE 7.
 */

nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */

/**
 * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
 * 2. Improve image quality when scaled in IE 7.
 */

img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}

/**
 * Correct overflow displayed oddly in IE 9.
 */

svg:not(:root) {
    overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */

/**
 * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
 */

figure {
    margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */

/**
 * Correct margin displayed oddly in IE 6/7.
 */

form {
    margin: 0;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct color not being inherited in IE 6/7/8/9.
 * 2. Correct text not wrapping in Firefox 3.
 * 3. Correct alignment displayed oddly in IE 6/7.
 */

legend {
    border: 0; /* 1 */
    padding: 0;
    white-space: normal; /* 2 */
    *margin-left: -7px; /* 3 */
}

/**
 * 1. Correct font size not being inherited in all browsers.
 * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
 *    and Chrome.
 * 3. Improve appearance and consistency in all browsers.
 */

button,
input,
select,
textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}

/**
 * Address Firefox 3+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
    line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */

button,
select {
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
    *overflow: visible;  /* 4 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
    cursor: default;
}

/**
 * 1. Address box sizing set to content-box in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 * 3. Remove excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 3+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 6/7/8/9.
 * 2. Improve readability and alignment in all browsers.
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}
//
// Typography
// ----------------------------------------------------------------------------------

$font-family-sans-serif: "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "SimSun", \5b8b\4f53, "WenQuanYi Micro Hei", "Helvetica Neue", Arial, Tahoma,  sans-serif !default;
$font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace !default;
$font-family: $font-family-sans-serif !default;
$en-font-family: "Helvetica Neue",  Arial,Tahoma !default;

$header-font-family: "Microsoft YaHei", "Hiragino Sans GB", "WenQuanYi Micro Hei", sans-serif !default;

$font-size: 12px !default;
$line-height: 18px !default;

@mixin font-smoothing($value: antialiased) {
  @if $value == antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  @else {
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
  }
}

*, *:before, *:after {
  @include box-sizing(border-box);
}

html {
  font-size: 62.5%;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

body {
  color: $color-text;
  font-size: $font-size;
  line-height: $line-height;
  font-family: $font-family;
  @include font-smoothing();
}

// font inhreit
input,
button,
select,
textarea {
  font-family: inherit;
  background-image: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: $header-font-family;
}

ul,
ol,
menu {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

// link
a {
  @include unstyled-link();
  @include link-colors($color-link, $color-link);
  cursor: pointer;
}

// code
//
code,
kbd,
pre,
samp {
  font-family: $font-family-monospace;
}

[class^="icon-"],
[class*=" icon-"] {
  @include inline-block();
}

.hide {
  display: none;
}

.clearfix {
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
  zoom: 1
}

.heading {
  > * {
    padding: 5px;
    border: 1px solid $color-border;
    border-top: 0;
  }
}

.heading-title {
  font-size: 1.2em;
  padding: 10px 12px;
  font-weight: normal;
  margin: 0;
  color: white;
  border: 1px solid $color-primary;
  background-color: $color-primary;
}

.currency {
  font-size: 1.1em;
  font-family: Tahoma, Verdana, Arial, sans-serif;
  color: $color-currency;
  font-weight: bold;
}


.left-text {
  text-align: left;
}

.right-text {
  text-align: right;
}

.pull-left {
  float: left !important;
}

.pull-right {
  float: right !important;
}

button,
input,
select,
textarea {
  vertical-align: middle; /* 3 */
}

.block {
  display: block;
  min-height: 50px;
  color: $color-text;
  border: 1px solid $color-border;
  background-color: #fff;
  padding: 5px 10px;
}

.block-primary {
  color: $color-primary;
  border: 1px solid transparent;
  background-color: $color-background;
}

$span1-width: 140px !default;
$span2-width: 195px !default;
$span3-width: 260px !default;
$span-padding: 0 !default;

.span1 {
  padding: $span-padding;
  @include inline-block();
  width: $span1-width;
}

.span2 {
  padding: $span-padding;
  @include inline-block();
  width: $span2-width;
  text-align: right;
}

.span3 {
  padding: $span-padding;
  @include inline-block();
  width: $span3-width;
  text-align: right;
}
//
// Accordion
// ----------------------------------------------------------------------------------

.accordion {
  .accordion-heading {
    height: 32px;
    line-height: 32px;
    border-width: 0;
    font-size: 12px;
    font-weight: normal;
    margin: 5px 0 0 0;
    background-color: #666;

    span {
      float: left;
      height: 32px;
      cursor: pointer;
      width: 15%;
      text-align: center;
      @include inline-block(middle);

      i {
        vertical-align: top;
        color: #000;
      }
    }

    a {
      width: 85%;
      display: block;
      color: white;
      float: left;
    }
  }

  .accordion-content {
    .accordion-heading {
      background-color: #ebecf0;

      a {
        width: 78%;
        padding-left: 22%;
        color: #24344e;
      }
    }
  }
}
//
// Alerts
// ----------------------------------------------------------------------------------

$alert-border-radius: 0 !default;

@mixin alert-arrow {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px;
}

@mixin alert-color ($color) {
  color: $color;
  border-color: $color;
  background-color: #fff;
  &.up {
    &:before {
      border-color: transparent transparent $color transparent;
    }
  }

  &.left {
    &:before {
      border-color: transparent $color transparent transparent;
    }
  }

  &.down {
    &:before {
      border-color: $color transparent transparent transparent;
    }
  }
}

.alert {
  display: block;
  overflow: hidden;
  border: 2px solid #ccd0d6;
  background-color: #ebecf0;
  padding: 20px;
  line-height: 20px;
  border-radius: $alert-border-radius;

  .alert-icon {
    float: left;
    margin-right: 10px;
  }

  .alert-message {
    float: left;
    font-size: 14px;

    h3 {
      font-size: 14px;
      margin: 0;
    }

    p {
      margin: 0;
    }
  }
}

.tip {
  position: relative;
  left: 4px;
  z-index: 20;
  padding: 0 10px;
  height: 26px;
  line-height: 26px;
  @include inline-block(middle);
  border: 1px solid white;
  color: $color-text;
  border-radius: $alert-border-radius;


  &.up {
    &:before {
      @include alert-arrow();
      top: -12px;
      left: 10px;
      border-color: transparent transparent $color-border transparent;
    }

    &:after {
      @include alert-arrow();
      top: -11px;
      left: 10px;
      border-color: transparent transparent white transparent;
    }
  }

  &.left {
    &:before {
      @include alert-arrow();
      left: -12px;
      top: 7px;
      border-color: transparent $color-border transparent transparent;
    }

    &:after {
      @include alert-arrow();
      left: -11px;
      top: 7px;
      border-color: transparent white transparent transparent;
    }
  }

  &.down {
    &:before {
      @include alert-arrow();
      left: 10px;
      top: 25px;
      border-color: $color-border transparent transparent transparent;
    }

    &:after {
      @include alert-arrow();
      left: 10px;
      top: 24px;
      border-color: white transparent transparent transparent;
    }
  }

  .tip-icon {
    float: left;
    margin-right: 4px;

    i {
      width: 16px;
      height: 16px;
      @include inline-block(baseline);
    }
  }

  .tip-message {
    float: left;

    p {
      margin: 0;
    }
  }
}

.tip-success,
.alert-success {
  @include alert-color(#2dc12d);
}

.tip-warning,
.alert-warning {
  @include alert-color(#ffbb00);
}

.tip-error,
.alert-error {
  @include alert-color(#ff2200);
}

.tip-info,
.alert-info {
  @include alert-color(#1eb6f8);
}
//
// Button Mixins
// ---------------------------------------------------------------------

$btn-font-size: 12px !default;
$btn-padding: 9px 16px !default;

$btn-medium-font-size: 12px !default;
$btn-medium-padding: 7px 14px !default;

$btn-small-font-size: 12px !default;
$btn-small-padding: 5px 12px !default;

$btn-border-radius: 0 !default;

@mixin btn-size($padding, $font-size) {
  padding: $padding;
  font-size: $font-size;
  line-height: $font-size;
}

@mixin btn-font-family($font-family) {
  font-family: $font-family;
}

@mixin btn-variant($color, $background, $border, $color-hover, $background-hover, $border-hover, $disabled-background-color, $disabled-border-color, $disabled-color) {
  color: $color;
  border-color: $border;
  background-color: $background;

  &:hover,
  &:focus,
  &:active,
  &.active {
    color: $color-hover;
    background-color: $background-hover;
    border-color: $border-hover;
    text-decoration: none;
    outline: 0;
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      cursor: not-allowed;
      background-color: $disabled-background-color;
      border-color: $disabled-border-color;
      color: $disabled-color;
    }
  }
}

//
// Buttons
// ----------------------------------------------------------------------------------

.btn {
  @include inline-block(baseline);
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: $btn-border-radius;
  white-space: nowrap;
  line-height: 18px;
  @include user-select(none);
  @extend .btn-primary;
}

.btn {
  @include btn-size($btn-padding, $btn-font-size);
}

.btn-primary {
  @include btn-variant($btn-primary-color, $btn-primary-background-color, $btn-primary-border, $btn-primary-hover-color, $btn-primary-hover-background-color, $btn-primary-hover-border, $btn-primary-disable-background-color, $btn-primary-disable-border, $btn-primary-disable-color);
}
.btn-secondary {
  @include btn-variant($btn-secondary-color, $btn-secondary-background-color, $btn-secondary-border, $btn-secondary-hover-color, $btn-secondary-hover-background-color, $btn-secondary-hover-border, $btn-secondary-disable-background-color, $btn-secondary-disable-border, $btn-secondary-disable-color);
}
.btn-info{
  @include btn-variant($btn-info-color, $btn-info-background-color, $btn-info-border, $btn-info-hover-color, $btn-info-hover-background-color, $btn-info-hover-border, $btn-info-disable-background-color, $btn-info-disable-border, $btn-info-disable-color);
}
.btn-ghost {
  @include btn-variant($btn-ghost-color, $btn-ghost-background-color, $btn-ghost-border, $btn-ghost-hover-color, $btn-ghost-hover-background-color, $btn-ghost-hover-border, $btn-ghost-disable-background-color, $btn-ghost-disable-border, $btn-ghost-disable-color);
}
.btn-warning {
  @include btn-variant($btn-secondary-color, $btn-secondary-background-color, $btn-secondary-border, $btn-warning-hover-color, $btn-warning-hover-background-color, $btn-warning-hover-border, $btn-secondary-disable-background-color, $btn-secondary-disable-border, $btn-secondary-disable-color);
}
.btn-danger {
  @include btn-variant($btn-secondary-color, $btn-secondary-background-color, $btn-secondary-border, $btn-danger-hover-color, $btn-danger-hover-background-color, $btn-danger-hover-border, $btn-secondary-disable-background-color, $btn-secondary-disable-border, $btn-secondary-disable-color);
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-large {
  @include btn-size($btn-padding, $btn-font-size);
}

.btn-medium {
  @include btn-size($btn-medium-padding, $btn-medium-font-size);
}

.btn-small {
  @include btn-size($btn-small-padding, $btn-small-font-size);
}

.btn-group,
.btn-toolbar {
  @include inline-block(baseline);
  font-size: 0;

  .btn {
    position: relative;
    border-radius: 0;

    &.active {
      @extend .btn-primary;
      z-index: 9;
    }

  }
}

.btn-group {
  .btn:not(:first-child) {
    margin-left: 10px;
  }
}

.btn-upload {
  position: relative;
  overflow: hidden;
  @include inline-block(top);
  background-color: white;
  color: $btn-upload-color;
  border: 1px solid $color-border;


  &:hover, &.active {
    color: $color-primary;
    background-color: white;
    border: 1px solid $color-primary;
    cursor: pointer;
  }

  span {
    @include inline-block(baseline);
    height: $font-size;
    i {
      margin-right: 10px;
      font-size: 16px;
      line-height: $font-size;
    }
  }

  input {
    top: 0;
    right: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: absolute;
    @include opacity(0);
  }
}
//
// Cards
// ----------------------------------------------------------------------------------

.card {
  hr {
    border: none;
    margin: 2px 0;
    border-top: 1px solid $color-border;
  }

  dl {
    margin: 0;
    width: 100%;
    line-height: 32px;

    dt,
    dd {
      @include inline-block(middle);

      &.card-text {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 62.5%;
        height: 32px;
      }

      a:hover {
        color: $color-border;
      }
    }

    dt {
      width: 37.5%;
      text-align: right;
    }

    dd {
      margin: 0;

      span {
        color: $color-text;
      }
    }
  }
}
.badge {
  color: $white !important;
  padding: 2px;
  margin: 0 5px;
  font-size: 12px;
  border-radius: 0;
  background-color: $color-primary;
}

.badge-primary {
  color: $white !important;
  background-color: $color-primary;
}
//
// Carousels
// ----------------------------------------------------------------------------------

$carousel-indicator-size: 12px !default;
$carousel-rounded-indicator-size: 25px !default;
$carousel-squared-indicator-size: 25px !default;
$carousel-indicator-color: $color-primary !default;

.carousel {
  position: relative;
  overflow: hidden;

  .carousel-contents {
    .carousel-content {
      position: absolute;
      left: 0;
      width: 100%;
    }
  }

  .carousel-navs {
    z-index: 1;
    position: relative;
    height: 100%;
    cursor: pointer;
  }

  .carousel-control {
    position: absolute;
    top: 50%;
    left: 0;
    bottom: 0;
    height: 40px;
    margin-top: -20px;
    text-align: center;
    z-index: 9;

    &.left {
      left: 20px;
    }

    &.right {
      left: auto;
      right: 20px;
    }
  }

  .carousel-indicators {
    position: absolute;
    z-index: 9;
    left: 50%;
    bottom: 5px;
    width: 60%;
    margin-left: -30%;
    padding-left: 0;
    list-style: none;
    text-align: center;

    li {
      @include inline-block(baseline);
      margin-right: 6px;
      width: $carousel-indicator-size;
      height: $carousel-indicator-size;
      text-indent: -9999px;
      background-color: #666;
      border-radius: $carousel-indicator-size / 2;
      cursor: pointer;

      &.active {
        background-color: $carousel-indicator-color;
      }
    }
  }
}

.carousel-rounded {
  .carousel-indicators {
    li {
      width: $carousel-rounded-indicator-size;
      height: $carousel-rounded-indicator-size;
      text-indent: inherit;
      color: white;
      border-radius: $carousel-rounded-indicator-size / 2;

      span {
        line-height: $carousel-rounded-indicator-size;
      }
    }
  }
}

.carousel-squared {
  .carousel-indicators {
    li {
      width: $carousel-squared-indicator-size;
      height: $carousel-squared-indicator-size;
      text-indent: inherit;
      color: white;
      border-radius: 0;

      span {
        line-height: $carousel-squared-indicator-size;
      }
    }
  }
}

.carousel-rounded-rt {
  .carousel-indicators {
    margin: 10px;
    width: auto;
    height: 12px;
    left: auto;
    right: 0;
    top: 0;

    li {
      width: 6px;
      height: 6px;
      border-radius: 3px;
      margin-right: 2px;
    }
  }
}

.carousel-squared-lb {
  .carousel-indicators {
    margin: 10px;
    width: auto;
    height: 6px;
    left: 0;
    bottom: 0;

    li {
      margin-right: 2px;
      border-radius: 0;
      height: 6px;
      width: 20px;
    }
  }
}

.carousel-super {
  position: static;
  margin-left: auto;
  margin-right: auto;

  .carousel-contents {
    .carousel-content {
      a {
        display: block;
        height: 100%;
        width: 100%;
      }
    }
  }
}
.component-cascader-container {
  position: absolute;
  z-index: 999;
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid $color-border;
  font-size: 0;

  .category-container {
    background-color: transparent;
    width: 180px;
    height: 280px;
    overflow-y: auto;
    border-left: 1px solid $color-border;
    font-size: 12px;
    @include inline-block(top);

    &:first-child {
      border-left: 0;
    }
  }

  .category-item {
    padding: 7px 10px;

    &:first-child {
      margin-top: 0;
    }

    &:hover {
      background-color: $color-background;
    }

    &.selected {
      background-color: $color-primary-light;
      color: #fff;
    }
  }
}
//
// Checkbox
// ----------------------------------------------------------------------------------

$checkbox-width: 14px !default;
$checkbox-height: 14px !default;
$checkbox-background-color: #fff !default;
$checkbox-border-radius: 0 !default;
$checkbox-border-color: $color-border !default;
$checkbox-hover-border-color: $color-primary !default;
$checkbox-disable-background-color: $color-background !default;
$checkbox-spacing: 8px !default;

input[type=checkbox].input-checkbox {
  @include inline-block(baseline);
  height: $checkbox-height;
  width: $checkbox-width;
  border-radius: $checkbox-border-radius;
  margin-right: $checkbox-spacing;
  background-color:$checkbox-background-color;
  position: relative;
  @include appearance(none);

  &:before {
    height: $checkbox-height;
    width: $checkbox-width;
    border: 1px solid $checkbox-border-color;
    position: absolute;
    content: "";
  }

  &:after {
    height: $checkbox-height;
    width: $checkbox-width;
    font-size: 14px;
    border: 1px solid $checkbox-border-color;
    font-family: "icon-pokeball" !important;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    position: absolute;
    content: "";
  }

  &:focus {
    outline: none;
  }

  &:hover,
  &[indeterminate="true"],
  &:checked,
  &[checked="checked"] {

    &:after,&:before {
      border: 1px solid $checkbox-hover-border-color;
    }
  }

  &[indeterminate="true"],
  &:checked,
  &[checked="checked"] {

    &:before {
      background-color: #fff;
      display: block;
    }

    &:after {
      width: 14px;
      height: 14px;
      color: $checkbox-hover-border-color;
      border-width: 0;
      background-color: transparent;
    }
  }

  &[indeterminate="true"] {

    &:after {
      content: "\e603";
    }
  }

  &:checked,
  &[checked="checked"] {

    &:after {
      content: "\e602";
    }
  }

  &.disabled,
  &[readonly],
  &[disabled],
  fieldset[disabled] & {
    pointer-events: none;
    cursor: not-allowed;

    &:after {
      background-color: transparent;
      border-width: 0;
      color: $checkbox-disable-background-color !important;
      pointer-events: none;
      cursor: not-allowed;
    }

    &:before {
      background-color: $checkbox-border-color;
      border: 1px solid $checkbox-border-color;
      pointer-events: none;
      cursor: not-allowed;
    }
  }
}
//
// Datepicker
// ----------------------------------------------------------------------------------

.datepicker {
  &[readonly] {
    background-color: #fff !important;
  }
}

.pika-single {
    z-index: 9999;
    display: block;
    position: relative;
    color: $pika-calendar-color;
    background: $pika-calendar-bg-color;

    &.is-hidden {
        display: none;
    }

    &.is-bound {
        position: absolute;
    }
}

// clear child float (pika-lendar), using the famous micro clearfix hack
// http://nicolasgallagher.com/micro-clearfix-hack/
.pika-single {
    *zoom: 1;

    &:before,
    &:after {
        content: " ";
        display: table;
    }

    &:after { clear: both }
}

.pika-lendar {
    float: left;
    width: 278px;
    height: 282px;
    border: 1px solid $pika-calendar-border-color;
}

.pika-title {
    position: relative;
    text-align: center;
    height: 30px;
    border-bottom: 1px solid $pika-calendar-border-color;

    select {
        cursor: pointer;
        position: absolute;
        z-index: 9998;
        margin: 0;
        left: 0;
        top: 5px;
        filter: alpha(opacity=0);
        opacity: 0;
        height: auto;
    }
}

.pika-label {
    display: inline-block;
    *display: inline;
    position: relative;
    z-index: 9999;
    overflow: hidden;
    margin: 0;
    padding: 5px 3px;
    font-size: 12px;
    line-height: 18px;
    font-weight: bold;
    background-color: $pika-calendar-bg-color;
}

.pika-prev,
.pika-next {
    display: block;
    cursor: pointer;
    position: relative;
    outline: none;
    border: 0;
    padding: 0;
    width: 20px;
    height: 30px;
    text-indent: 20px; // hide text using text-indent trick, using width value (it's enough)
    white-space: nowrap;
    overflow: hidden;
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 75% 75%;
    opacity: .5;
    *position: absolute;
    *top: 0;

    &:hover {
        opacity: 1;
    }

    &.is-disabled {
        cursor: default;
        opacity: .2;
    }
}

.pika-prev,
.is-rtl .pika-next {
    float: left;
    background-image: url('');
    *left: 0;
}

.pika-next,
.is-rtl .pika-prev {
    float: right;
    background-image: url('');
    *right: 0;
}

.pika-select {
    display: inline-block;
    *display: inline;
}

.pika-calendar {
  padding: 6px 16px;
}

.pika-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border: 0;

    th,
    td {
        width: 14.285714285714286%;
        padding: 0;
        height: 34px;
    }

    th {
        color: $pika-calendar-color;
        font-size: 12px;
        line-height: 18px;
        font-weight: bold;
        text-align: center;
    }

    abbr {
        border-bottom: none;
        cursor: help;
    }
}

.pika-button {
    position: relative;
    cursor: default;
    display: block;
    text-align: center;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    margin: auto;
    padding: 0;
    border: 0;
    width: 100%;
    color: $pika-calendar-color;
    background-color: transparent;
    font-size: 12px;
    line-height: 18px;
    text-align: center;

    &:after {
      content: '';
      display: none;
      background-color: $pika-calendar-secondary-color;
      position: absolute;
      width: 20px;
      height: 20px;
      top: 0;
      z-index: -1;
    }

    &:hover .pika-day{
        color: $pika-calendar-inverse-color;
        background: $pika-calendar-primary-color;
        box-shadow: none;
    }

    .pika-day {
      cursor: pointer;
      position: relative;
      @include inline-block();
      width: 20px;
      height: 20px;
      line-height: 20px;
      border-radius: 20px;

      .is-today & {
          color: $pika-calendar-primary-color;
          font-weight: bold;
      }

      .is-selected & {
          color: $pika-calendar-bg-color;
          font-weight: bold;
          background: $pika-calendar-primary-color;
          border-radius: 20px;
      }

      .is-disabled &,
      .is-outside-current-month & {
          pointer-events: none;
          cursor: default;
          color: $pika-calendar-invalid-color;
          opacity: .3;
      }

      &:hover {
        color: white;
      }
    }
}

.pika-week {
    font-size: 11px;
    color: $pika-calendar-invalid-color;
}

.is-inrange .pika-button {
    background: $pika-calendar-secondary-color;
}

.is-startrange .pika-button {
  &:after {
    display: block;
    right: 0;
  }
}

.is-endrange .pika-button {
  &:after {
    display: block;
    left: 0;
  }
}

.is-startrange .pika-day {
    color: $pika-calendar-inverse-color;
    background: $pika-calendar-primary-color;
    box-shadow: none;
}

.is-endrange .pika-day {
    color: $pika-calendar-inverse-color;
    background: $pika-calendar-primary-color;
    box-shadow: none;
}
//
// Dropdown
// ----------------------------------------------------------------------------------

$dropdown-caret-size: 5px !default;

.caret {
  @include inline-block(top);
  width: 0;
  height: 0;
  border-top: $dropdown-caret-size solid #000;
  border-right: $dropdown-caret-size solid transparent;
  border-left: $dropdown-caret-size solid transparent;
  content: "";
}

.dropdown {
  @include inline-block();
  position: relative;

  .dropdown-selector {
    @include inline-block();
    position: relative;
    cursor: pointer;

    input[readonly] {
      background-color: white;
      cursor: pointer;
      padding-right: 20px;
      &[disabled] {
        cursor: not-allowed;
        background-color: $color-background;
      }
    }

    .caret {
      position: absolute;
      right: 10px;
      top: 15px;
      border-top-color: $color-border;
    }
  }

  .dropdown-content {
    position: absolute;
    display: none;
    background-color: white;
    width: 100%;
    z-index: 1;
  }

  .dropdown-menu {
    padding: 0;
    margin: 0;
    border: 1px solid $color-border;
    border-top: 0;
    max-height: 260px;
    overflow: auto;

    li {
      line-height: 30px;
      padding: 0 10px;
      cursor: pointer;
      list-style: none;
      word-wrap: break-word;

      &.active {
        background-color: $color-background;
      }
      &:before, &:after {
        content: "";
        display: table;
      }
      &:after {
        clear: both;
      }
      &:hover {
        background-color: $color-background;

        i {
          visibility: visible;
        }
      }

      i {
        float: right;
        visibility: hidden;
        color: $color-text;
      }
    }
  }

  .dropdown-append {
    margin-top: -1px;

    input {
      width: 103px;
      padding: 8px 10px;
    }

    button {
      &:hover,
      &:focus,
      &:active{
        border-color: #bbb;
      }
    }
  }
}
//
// Flow
// ----------------------------------------------------------------------------------
.flow-container {
  margin: 0 auto;
  width: 100%;
  * {
    box-sizing: border-box;
  }
  .row {
    &:before,
    &:after {
      content: "";
      display: table;
      clear: both;
    }
    [class *="col-"] {
      float: left;
    }
    &.gutter {
      margin: 0 -1%;
      >[class *="col-"] {
        padding: 0 1%;
      }
    }
    .col-1-1 {
      width: 100%
    }
    .col-2-1 {
      width: 50%;
    }
    .col-3-1 {
      width: 33.33%;
    }
    .col-3-2 {
      width: 66.67%;
    }
    .col-4-1 {
      width: 25%;
    }
    .col-4-2 {
      width: 50%;
    }
    .col-4-3 {
      width: 75%;
    }
  }
}//
// Forms
// ----------------------------------------------------------------------------------

$input-height: 32px !default;
$input-width: 160px !default;
$input-line-height: 18px !default;
$input-padding: 7px 10px !default;

$form-aligned-label-width: 8em !default;
$form-aligned-label-right: 15px !default;
$form-aligned-controls-left: 138px !default;

$input-large-width: 462px !default;
$input-medium-width: 232px !default;
$input-small-width: 71.5px !default;

$input-block-small-width: 90px !default;

@mixin note($color) {
  color: $color;
  @include inline-block(baseline);
  margin-left: 4px;
}

select,
textarea,
input.control,
[contenteditable=true],
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="week"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="color"] {
  width: $input-width;
  padding: $input-padding;
  height: $input-height;
  line-height: $input-line-height;
  border: 1px solid $input-border-color;
  border-radius: $input-border-radius;
  font-family: $input-font-family;
  color: $input-text-color;
  font-size: 12px;
  @include input-placeholder {
    color: $input-placeholder-color;
  }

  &:hover {
    border-color: $input-hover-color;
  }
  &:focus {
    outline: 0;
    border-color: $input-focus-color;
  }

  &[readonly] {
    background-color: $color-background;
    color: $color-text;
    border-color: $color-border;
  }

  &[disabled] {
    cursor: not-allowed;
    background-color: $color-background;
    color: $color-text;
  }

  &.error {
    outline: 0;
    border-color: $input-danger-color;
  }
}

select {
  padding: 4px 5px;
  width: 188px;
}

textarea {
  width: 267px;
  height: auto;
  margin-bottom: 4px;
}

input[type=number] {
  -moz-appearance:textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="file"]:focus{
  outline: thin dotted $color-border;
}

select {
  height: 28px;
  @include appearance(menulist);
}

select[multiple] {
  height: auto;
}

.input-small {
  width: $input-small-width !important;
}

.input-medium {
  width: $input-medium-width !important;
}

.input-large {
  width: $input-large-width !important;
}

label {
  @include inline-block(baseline);
  margin-right: 2px;
  color: $label-text-color;
}

legend {
  display: block;
  width: 100%;
  margin-bottom: 0.3em;
  font-size: 125%;
  color: $color-text;
}

fieldset {
  margin: 0;
  padding: 5px 0;
  border: 0;
}

.form-aligned {

  .form-control {
    width: 100%;
    display: block;
  }

  .control-group {
    margin-bottom: 16px;

    label {
      text-align: right;
      @include inline-block(baseline);
      width: $form-aligned-label-width;
      margin-right: $form-aligned-label-right;
    }

    .note {
      @include note($color-text-assist);
    }

    .note-error,
    .note-error-empty {
      @include note($color-danger);
      display: none;
    }

    .note-success {
      @include note($color-success);
      display: none;
    }

    .note-icon {
      margin-left: -27px;
      line-height: 16px;
      padding-right: 7px;
    }

    &.success,
    .success {

      .note {
        display: none;
      }

      .note-success {
        @include inline-block(baseline);
      }

      input.control,
      input[type="text"],
      input[type="password"],
      input[type="email"],
      input[type="url"],
      input[type="date"],
      input[type="month"],
      input[type="time"],
      input[type="datetime"],
      input[type="datetime-local"],
      input[type="week"],
      input[type="number"],
      input[type="search"],
      input[type="tel"],
      input[type="color"],
      select,
      textarea {
        outline: 0;
        border-color: $color-success;
      }
    }

    &.error,
    .error {

      .note, .note-error-empty {
        display: none;
      }

      .note-error {
        @include inline-block(baseline);
      }

      input.control,
      input[type="text"],
      input[type="password"],
      input[type="email"],
      input[type="url"],
      input[type="date"],
      input[type="month"],
      input[type="time"],
      input[type="datetime"],
      input[type="datetime-local"],
      input[type="week"],
      input[type="number"],
      input[type="search"],
      input[type="tel"],
      input[type="color"],
      select,
      textarea {
        outline: 0;
        border-color: $color-danger;
        color: $color-danger;
      }
    }

    &.error.empty, .error.empty {
      .note, .note-error {
        display: none;
      }
      .note-error-empty {
        @include inline-block(baseline);
      }
    }
  }

  .controls {
    margin-bottom: 16px;
    margin-left: $form-aligned-controls-left;
  }
}

.form .spacing {
  @include inline-block(middle);
  width: 10px;
  font-size: 12px;
  text-align: center;
}

.form {
  label {
    vertical-align: middle;
  }

  .input-pair {
    @include inline-block();
    border: 1px solid $input-border-color;
    font-size: 0;

    input {
      border: 0;
    }

    .spacing {
      width: 8px;
      color: $input-placeholder-color;
    }
  }
}

.required {
  @include inline-block(top);
  margin: 0 2px;
  color: $color-danger !important;
}

.block {
  .form {
    input.control,
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="url"],
    input[type="date"],
    input[type="month"],
    input[type="time"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="week"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="color"],
    select {
      width: 190px;

      &.input-small {
        width: $input-block-small-width !important;
      }
    }
  }
}
//
// Grids
// ----------------------------------------------------------------------------------
$grid-padding: 10px !default;
$grid-font-size: 12px !default;
.grid-container {
  margin: 0 auto;
  padding: 0;
  /*
    define content:
    --row
    --column
  */
  .row {
    font-size: 0;
    &:before,
    &:after {
      content: "";
      display: table;
      clear: both;
    }
    >[class *="col-"] {
      float: left;
      font-size: $grid-font-size;
    }
  }
}


/* child element size with border-box */

.grid-container * {
  box-sizing: border-box;
}


/* start media query */


/* screen width less than 480px */

@media all and (max-width: 480px) {
  .grid-container {
    max-width: 460px;
    .row {
      >.col-1 {
        width: 25%;
      }
      >.col-2 {
        width: 50%;
      }
      >.col-3 {
        width: 75%;
      }
      >.col-4,
      >.col-5,
      >.col-6,
      >.col-7,
      >.col-8,
      >.col-9,
      >.col-10,
      >.col-11,
      >.col-12 {
        width: 100%;
      }
      >.col-offset-1 {
        margin-left: 25%;
      }
      >.col-offset-2 {
        margin-left: 50%;
      }
      >.col-offset-3 {
        margin-left: 75%;
      }
      >.col-offset-4,
      >.col-offset-5,
      >.col-offset-6,
      >.col-offset-7,
      >.col-offset-8,
      >.col-offset-9,
      >.col-offset-10,
      >.col-offset-11,
      >.col-offset-12 {
        margin-left: 100%;
      }
    }
  }
}


/* screen width more than 480px less than 840px */

@media all and (max-width: 840px) and (min-width: 481px) {
  .grid-container {
    max-width: 720px;
    .row {
      >.col-1 {
        width: 12.5%;
      }
      >.col-2 {
        width: 25%;
      }
      >.col-3 {
        width: 37.5%;
      }
      >.col-4 {
        width: 50%;
      }
      >.col-5 {
        width: 62.5%;
      }
      >.col-6 {
        width: 75%;
      }
      >.col-7 {
        width: 87.5%;
      }
      >.col-8,
      >.col-9,
      >.col-10,
      >.col-11,
      >.col-12 {
        width: 100%;
      }
      >.col-offset-1 {
        margin-left: 12.5%;
      }
      >.col-offset-2 {
        margin-left: 25%;
      }
      >.col-offset-3 {
        margin-left: 37.5%;
      }
      >.col-offset-4 {
        margin-left: 50%;
      }
      >.col-offset-5 {
        margin-left: 62.5%;
      }
      >.col-offset-6 {
        margin-left: 75%;
      }
      >.col-offset-7 {
        margin-left: 87.5%;
      }
      >.col-offset-8,
      >.col-offset-9,
      >.col-offset-10,
      >.col-offset-11,
      >.col-offset-12 {
        margin-left: 100%;
      }
    }
  }
}

@media all and (max-width:840px) {
  .grid-container {
    .row.gutter {
      margin: 0 -4px;
      >[class *="col-"] {
        padding: 0 4px;
      }
    }
  }
}

@media all and (min-width:841px) {
  .grid-container {
    .row {
      >.col-1 {
        width: 8.33%;
      }
      >.col-2 {
        width: 16.66%;
      }
      >.col-3 {
        width: 25%;
      }
      >.col-4 {
        width: 33.33%;
      }
      >.col-5 {
        width: 41.66%;
      }
      >.col-6 {
        width: 50%;
      }
      >.col-7 {
        width: 58.33%;
      }
      >.col-8 {
        width: 66.66%;
      }
      >.col-9 {
        width: 75%;
      }
      >.col-10 {
        width: 83.33%;
      }
      >.col-11 {
        width: 91.66%;
      }
      >.col-12 {
        width: 100%;
      }
      >.col-offset-1 {
        margin-left: 8.33%;
      }
      >.col-offset-2 {
        margin-left: 16.66%;
      }
      >.col-offset-3 {
        margin-left: 25%;
      }
      >.col-offset-4 {
        margin-left: 33.33%;
      }
      >.col-offset-5 {
        margin-left: 41.66%;
      }
      >.col-offset-6 {
        margin-left: 50%;
      }
      >.col-offset-7 {
        margin-left: 58.33%;
      }
      >.col-offset-8 {
        margin-left: 66.66%;
      }
      >.col-offset-9 {
        margin-left: 75%;
      }
      >.col-offset-10 {
        margin-left: 83.33%;
      }
      >.col-offset-11 {
        margin-left: 91.66%;
      }
      >.col-offset-12 {
        margin-left: 100%;
      }
    }
    .row.gutter {
      margin: 0 -8px;
      >[class *="col-"] {
        padding: 0 8px;
      }
    }
  }
}


/* screen width more than 840px less than 1280px */

@media all and (max-width: 1480px) and (min-width: 841px) {
  .grid-container {
    max-width: 960px;
  }
}


/* screen width more than 1280px */

@media all and (min-width: 1481px) {
  .grid-container {
    max-width: 1200px;
  }
}
.guide {
  width: 160px;
  color: #197aff;
  border: 1px solid #ccd0d6;
  padding-left: 0;
  position: relative;
}
.guide li {
  list-style: none;
}
.guide li [data-guide-pop] {
  display: none;
  position: absolute;
  width: 300px;
  top: -1px;
  left:158px;
  bottom: -1px;
  border: 1px solid #ccd0d6;
  background: #fff;
}
.guide li a {
  display: block;
  padding: 5px 10px;
}
.guide li a.guide-active {
  color: #fff;
  background-color: #197aff;
}//
// Gutter
// ----------------------------------------------------------------------------------
.gutter-box {
  margin: 0 auto;
  width: 100%;
  &:before,
  &:after {
    content: "";
    display: table;
    clear: both;
  }
  .column {
    float: left;
  }
  &.gutter-0 {
    margin: 0 0;
    .column {
      padding: 0 0;
    }
  }
  &.gutter-8 {
    margin: 0 -4px;
    .column {
      padding: 0 4px;
    }
  }
  &.gutter-16 {
    margin: 0 -8px;
    .column {
      padding: 0 8px;
    }
  }
  &.gutter-24 {
    margin: 0 -12px;
    .column {
      padding: 0 12px;
    }
  }
  .cols-2 {
    width: 50%;
  }
  .cols-3 {
    width: 33.33%;
  }
  .cols-4 {
    width: 25%;
  }
  .cols-6 {
    width: 16.57%;
  }
  .cols-8 {
    width: 12.5%;
  }
  .cols-12 {
    width: 8.33%;
  }
}//
// Input-group
// ----------------------------------------------------------------------------------

$input-font-size:  12px !default;
$input-search-input-height: 38px !default;
$input-search-input-border-width: 1px !default;
$input-search-input-font-size: 14px !default;
$input-search-input-line-height: 18px !default;

@mixin input-btn-size($padding, $font-size) {
  padding: $padding;
  font-size: $font-size;
  line-height: $font-size;
}
@mixin input-word-spacing($type) {
  @if $type == compressed {
    border-radius: 0;
    text-rendering: optimizespeed;
  } @else if $type == normal {
    @include inline-block();
    letter-spacing: normal;
  }
}

.input-group {
  border-radius: $input-border-radius;
  @include input-word-spacing(compressed);

  input,
  .input-group-addon,
  .input-group-btn {
    @include input-word-spacing(normal);
  }

  input {
    height: $input-height;
    line-height: $input-font-size;
    padding: $input-padding;
    font-size: 12px;
  }
}

.input-group-prepend {
  font-size: 0;

  .input-group-addon {
    @include inline-block(top);
    height: $input-height;
    line-height: $input-line-height;
    padding: $input-padding;
    text-align: center;
    border-radius: $input-border-radius;
    border: 1px solid $input-border-color;
    border-right: 0;
    background-color: $input-background-color;
    font-size: 12px;
  }
}

.input-group-append {
  font-size: 0;

  .input-group-btn {
    margin-left: -1px;
  }
}

.input-search {
  input {
    height: $input-search-input-height;
    line-height: $input-search-input-line-height;
    font-size: $input-search-input-font-size;
    border: $input-search-input-border-width solid $input-search-border-color;
    border-right-width: 0;
    border-radius: $input-border-radius;
    width: 338px;
  }

  .input-group-btn .btn {
    @include input-btn-size(9px 20px, 18px);
  }
}

.input-amount {
  @include box-sizing(border-box);
  @include inline-block(middle);
  @include input-word-spacing(compressed);
  border-radius: $input-border-radius;
  font-size: 0;
  line-height: 14px;
  white-space: nowrap;

  &:hover {
    border-top: 1px solid $color-primary;
    border-bottom: 1px solid $color-primary;

    a, input {
      border-top-width: 0;
      border-bottom-width: 0;
      height: 30px;
    }

    a {
      &:first-child {
        border-left-color: $color-primary !important;
      }

      &:last-child {
        border-right-color: $color-primary !important;
      }
    }
  }

  &.disabled,
  &.readOnly {
    &,
    &:hover {
      border-width: 0;

      a, input {
        height: 30px;
        background-color: $color-background;
        border-top: 1px solid $input-disable-border-color;
        border-bottom: 1px solid $input-disable-border-color;
        cursor: not-allowed;
        pointer-events: none;
        color: $input-disable-color;
      }

      a {
        border-color: $input-disable-border-color !important;
        color: $input-disable-color;
      }
    }
  }

  a,
  input {
    font-size: 12px;
    @include inline-block(middle);
  }

  input {
    width: 44px;
    text-align: center;
    border-radius: 0;
    border-left-width: 0;
    border-right-width: 0;
    padding: 0px 10px;
    height: 32px;
    line-height: 32px;

    &:focus {
      border-color: $color-border;
    }
  }

  a {
    width: 18px;
    text-align: center;
    line-height: 30px;
    color: $color-text;
    border: 1px solid $color-border;

    &:hover {
      color: $color-primary;
    }

    &.disabled,
    &.readOnly {
      color: $color-text;
      background-color: $color-background;
      border-color: $color-border;
      cursor: not-allowed;
    }
  }

  &.group-large {
    height: 32px;

    a,input {
      height: 32px;
    }

    a {
      height: 32px;
      line-height: 30px;
    }

    input {
      width: 64px;
    }

    &:hover {
      a,input {
        height: 30px;
      }
    }

    &.disabled,
    &.readOnly {
      a,input {
        height: 32px;
      }
    }
  }

  &.group-medium {
    height: 28px;

    a,input {
      height: 28px;
    }

    a {
      height: 28px;
      line-height: 26px;
    }

    input {
      width: 44px;
    }

    &:hover {
      a,input {
        height: 26px;
      }
    }

    &.disabled,
    &.readOnly {
      a,input {
        height: 28px;
      }
    }
  }

  &.group-small {
    height: 20px;

    a,input {
      height: 20px;
    }

    a {
      height: 20px;
      line-height: 18px;
    }

    input {
      width: 44px;
      line-height: 18px;
    }

    &:hover {
      a,input {
        height: 18px;
      }
    }

    &.disabled,
    &.readOnly {
      a,input {
        height: 20px;
      }
    }
  }
}
//
// List
// ----------------------------------------------------------------------------------

.list {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    padding-top: 10px;

    li {
      float: left;
      position: relative;
      width: 230px;
      height: 320px;
      padding: 10px;
      margin: 0 10px 10px 0;
      border-radius: 0;
      border: 1px solid $color-border;

      &:hover {
        border: 1px solid transparent;
        border-color: $list-border-color;
      }

      &.last {
        margin-right: 0;
      }

      &.product {

        a {
          color: $color-text;

          &:hover {
            text-decoration: underline;
            color: $list-border-color;
          }
        }

        .product-image {
          width: 206px;
          height: 206px;
        }

        .product-price {
          margin: 10px 0;

          .currency {
            font-size: 18px;
            font-weight: normal;
          }
        }

        .product-desc {
          display: block;
          overflow: hidden;
          height: 36px;
          line-height: 18px;
          margin-top: -5px;
        }

        .product-owner {
          position: absolute;
          left: 10px;
          top: 296px;

          a {
            color: $color-text;
          }
        }
      }
    }
  }
}

.list-squared {
  ul {
    li {
      width: 324px;
      height: 392px;
      padding: 6px;
      border-radius: 0;
      margin: 0 10px 10px 0;

      &.product {
        .product-image {
          width: 310px;
          height: 310px;
        }

        .product-price {
          margin: 10px 0;

          .currency {
            font-size: 13px;
            font-weight: bold;
          }
        }
      }
    }
  }
}

.list-condensed {
  ul {
    li {
      width: 244px;
      height: 312px;
      margin: 0 8px 8px 0;

      &.product {
        .product-image {
          width: 230px;
          height: 230px;
        }

        .product-price {
          margin: 10px 0;

          .currency {
            font-size: 13px;
            font-weight: bold;
          }
        }
      }
    }
  }
}

ul.suggestion {
  position: absolute;
  z-index: 9;
  background-color: white;
  border: 1px solid #dddddd;
  border-top: 0px;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.suggestion li a {
  display: block;
  padding: 6px 12px;
  color: #717171;
}
ul.suggestion li:hover a,
ul.suggestion li.active a {
  color: white;
  background-color: $color-primary;
}
//
// Menus
// ----------------------------------------------------------------------------------

$menu-caret-size: 5px !default;
$menu-list-padding: 8px !default;

@mixin menu-arrow {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px;
}

.menu {
  ul {
    padding: 0;
    margin: 0;
    list-style: none;
    border: 1px solid $color-menu-border;
    border-radius: 0;

    li {
      padding: $menu-list-padding;

      a {
        color: $color-text;
      }

      &:hover {
        background-color: $color-menu-background;
        cursor: pointer;
      }

      &.active {
        background-color: $color-menu-active;
        cursor: default;

        a {
          color: $color-link;
        }
      }

      &.sup {
        border-bottom: 1px solid $color-menu-border;
      }

      &.sub {
        padding-left: 25px;
      }

      span.caret {
        width: 0;
        height: 0;
        margin-top: -1px;
        margin-right: 4px;
        @include inline-block(middle);
        border-top: $menu-caret-size solid #666;
        border-right: $menu-caret-size solid transparent;
        border-left: $menu-caret-size solid transparent;
        content: "";
      }

      span.caret.reverse {
        margin-top: -7px;
        border-top: $menu-caret-size solid transparent;
        border-bottom: $menu-caret-size solid #666;
      }
    }
  }
}

.menu-dropdown {
  position: relative;
  z-index: 20;

  ul {
    background-color: #fff;
    height: 198px;
    overflow: auto;

    li {
      padding: 0 10px;
      margin-bottom: 1px;
      padding-bottom: 0;
      line-height: 32px;

      label {
        color: #24344e;
      }

      &:hover {
        background-color: $color-menu-background;
      }

      &.active {
        background-color: $color-menu-active;

        label {
          color: $color-primary;
        }
      }
    }
  }

  &.left {
    &:before {
      @include menu-arrow();
      left: -12px;
      top: 8px;
      border-color: transparent $color-menu-border transparent transparent;
    }

    &:after {
      @include menu-arrow();
      left: -11px;
      top: 8px;
      border-color: transparent #fff transparent transparent;
    }
  }

  &.up {
    &:before {
      @include menu-arrow();
      top: -12px;
      left: 8px;
      border-color: transparent transparent $color-menu-border transparent;
    }

    &:after {
      @include menu-arrow();
      top: -11px;
      left: 8px;
      border-color: transparent transparent #fff transparent;
    }
  }
}

.angle {
  font-size: 80%;
  margin-left: -2px;
  padding-right: 4px;
  color: $color-text;
  @include inline-block(middle);
}
//
// Modals
// ----------------------------------------------------------------------------------

$modal-border-radius: 2px !default;

.modal {
  z-index: 999;
  position: absolute;
  background-color: #fff;
  box-shadow: 0 0 10px $color-text;

  .modal-header {
    color: $color-text;
    padding: 20px;
    border-top-left-radius: $modal-border-radius;
    border-top-right-radius: $modal-border-radius;
    border-bottom: 1px solid $color-border;

    h2 {
      margin: 0;
      font-size: 14px;
      line-height: 14px;
      color: #666;
    }

    a {
      float: right;
      display: inline-block;
      font-size: 15px;
      color: $modal-color;
      margin-top: -2px;

      i {
        font-size: 20px;
        font-weight: bold;
      }
    }
  }

  .modal-body {
    padding: 20px 20px 16px 20px;
    @include min-height(200px);
  }

  .modal-footer {
    padding: 16px 20px 20px 20px;
    text-align: right;
    border-top: 1px solid $color-border;
    border-bottom-left-radius: $modal-border-radius;
    border-bottom-right-radius: $modal-border-radius;
  }
}

.modal-image-selector {
  width: 702px;

  .modal-body {
    padding: 15px;

    .modal-body-heading {
      width: 100%;
      position: relative;
      margin-bottom: 10px;
      @include inline-block(middle);

      .modal-body-heading-note {
        width: 80%;
        line-height: 18px;
        @include inline-block(middle);
      }

      .btn-upload {
        position: absolute;
        right: 0;
      }
    }

    .modal-body-content {
      border: 1px solid $color-border;
      padding-bottom: 15px;
      @include min-height(165px);

      ul.modal-image-list {
        margin: 0;
        padding: 0;
        list-style: none;
        overflow: hidden;

        li {
          float: left;
          margin: 15px;
          border: 2px solid transparent;
          box-shadow: 1px 1px 5px #ddd;
          position: relative;

          &:hover,
          &.active {
            border: 2px solid $color-primary;
            @include transition(0.3s linear border-color);
          }

          &:hover {
            .btn-trash {
              display: block;
            }
          }

          .modal-image {
            width: 100px;
            height: 100px;
          }

          img {
            width: 100%;
            height: 100%;
            vertical-align: bottom;
          }

          .btn-trash {
            display: none;
            position: absolute;
            right: 4px;
            top: 80px;
            padding: 1px;
          }

          &.last {
            margin-right: 0;
          }
        }
      }

      .pagination {
        width: 100%;
      }
    }

    .image-addr-wrap {
      padding: 10px 0 0 0;

      .image-address {
        width: 100%;
      }
    }
  }
}

.modal-image-selector-use {
  .modal-body-heading-note {
    min-height: 36px;
  }
  .modal-image-class {
    float: left;
    li {
      float: left;
      padding: 0 5px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      cursor: pointer;
      list-style: none;
      color: $color-overlay;
      &.active {
        color: #000;
      }
    }
  }
  .modal-local-list {
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    zoom: 1;
  }

  .modal-image-list {
    width: 670px;

    li {
      list-style: none;

      .item-name {
        color: #fff;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        text-indent: 3px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
        background-color: rgba(0, 0, 0, .5);
        background-color: $color-background \9;
      }

      .btn-trash {
        z-index: 2;
      }
    }

    i {
      font-size: 50px;
      width: 100%;
      text-align: center;
      line-height: 104px;
      color: $color-info;
    }
  }
}

.modal-dialog {
  z-index: 1000;
  padding: 24px 20px 20px 24px;
  min-width: 240px;
  line-height: 18px;
  border: 1px solid $color-border;

  .modal-dialog-icon {
    float: left;
    height: 25px;
    width: 25px;
    margin-right: 15px;

    i {
      font-size: 25px;
      @include inline-block(middle);
    }

    .error-status {
      color: $color-danger;
    }

    .info-status {
      color: $color-info;
    }

    .warning-status {
      color: $color-warning;
    }

    .success-status {
      color: $color-success;
    }
  }

  .modal-dialog-message {
    float: left;
    font-size: 12px;
    max-width: 400px;
    min-width: 200px;

    h3 {
      font-size: 16px;
      line-height: 21px;
      margin: 0;
    }

    p {
      margin: 12px 0 0 0;
    }
  }

  .modal-controls {
    text-align: right;
    margin-top: 32px;
  }
}

.overlay {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 998;
  background-color: $color-background;
  @include opacity(0.8);
}
//
// Navbars
// ----------------------------------------------------------------------------------

$navbar-width: 80px !default;
$navbar-height: 40px !default;
$navbar-padding: 10px !default;
$navbar-collapse-width: 1000px !default;

$navbar-condensed-font-size: 14px !default;
$navbar-condensed-line-height: 40px !default;
$navbar-condensed-padding: 0 18px !default;
$navbar-condensed-collapse-width: 1200px !default;

$navbar-top-width: auto !default;
$navbar-top-height: 12px !default;
$navbar-top-line-height: 30px !default;
$navbar-top-padding: 9px 10px 9px 15px !default;
$navbar-color: $color-primary !default;

.navbar {
  background-color: $navbar-color;

  .navbar-collapse {
    border: 0;
    margin: 0 auto;
    border-radius: 0;
    overflow: hidden;
    width: $navbar-collapse-width;

    .navbar-header {
      float: left;
    }

    ul {
      padding: 0;
      margin: 0;
      float: right;

      li {
        border: 0;
        padding: $navbar-padding;
        width: $navbar-width;
        line-height: $navbar-height;
        color: white;
        text-align: center;
        overflow: hidden;
        @include inline-block(middle);

        &:hover,
        &.active {
          cursor: pointer;
          background-color: $navbar-color;
          @include transition(0.3s linear background-color);
        }

        .navbar-item {
          line-height: 16px;

          i {
            @include inline-block(baseline);
          }

          a {
            color: white;
          }
        }

        .navbar-header {
          @include inline-block(middle);
        }
      }
    }
  }
}

.navbar-condensed {

  .navbar-collapse {
    width: $navbar-condensed-collapse-width;

    ul {
      float: left;

      li {
        width: auto;
        height: auto;
        //padding: 10px 16px;
        float: left;
        padding: 0;

        &:first-child,
        &.first {
          margin-left: 0;
        }

        &:hover,
        &.active {
          background-color: $navbar-color;
        }

        a {
          display: block;
          font-size: $navbar-condensed-font-size;
          line-height: $navbar-condensed-line-height;
          padding: $navbar-condensed-padding;
        }
      }
    }
  }
}

.navbar-primary {
  background-color: $color-primary;

  .navbar-collapse {
    ul {
      li {
        &:hover,
        &.active {
          background-color: $color-primary;
        }
      }
    }
  }
}

.navbar-top {
  font-size: 12px;
  background-color: transparent;

  .navbar-collapse {
    .navbar-header {
      line-height: $navbar-top-line-height;
    }

    ul {
      li {
        width: $navbar-top-width;
        line-height: $navbar-top-height;
        padding: $navbar-top-padding;
        color: $color-text;

        &.active,
        &:hover {
          background-color: transparent;
        }

        a {
          @include link-colors($color-text, $navbar-color);
        }
      }
    }
  }
}
//
// Navs
// ----------------------------------------------------------------------------------

.nav-group {
  border: 1px solid $color-border;
  padding: 0 10px;

  dl {
    margin: 0;
    width: 100%;
    line-height: 32px;
    border-bottom: 1px dashed $color-border;
    padding: 5px 0;

    &:last-child {
      border-bottom: 0;
    }

    dt,
    dd {

      @include inline-block(middle);

      a:hover {
        text-decoration: underline;
        color: $color-link;
      }
    }

    dt {
      position: relative;
      top: 1px;
      width: 140px;
      padding: 0 40px 0 20px;
      color: $color-info;
    }

    dd {
      margin: 0 20px 0 5px;

      a {
        color: $color-text;
      }

      span {
        margin-left: 2px;
        color: $color-info;
      }
    }
  }
}
//
// Paginations
// ----------------------------------------------------------------------------------

.pagination {
  text-align: center;
  @include inline-block(middle);

  a,
  span {
    @include inline-block(middle);
    padding: 6px 11px;
    border: 1px solid $pagination-border-color;
    margin-left: -1px;
    background-color: white;
    height: 32px;
  }

  span.current {
    color: white;
    background-color: $color-primary;
    border: 1px solid $color-primary;
    position: relative;

    &.prev,
    &.next {
      color: $pagination-border-color;
      background-color: white;
      border: 1px solid $pagination-border-color;
    }
  }

  a {
    color: $color-text;
    &:visited {
      color: $color-text;
    }
  }

  a:hover {
    color: $color-primary;
  }
  .prev {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .next {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  input[name="go-page"]{
    width: 36px;
    height: 32px;
    border: 1px solid $pagination-border-color;
    margin-left: 10px;
    vertical-align: middle;
    text-align: center;

    &:focus{
      outline: none;
    }
  }
  button[type="button"]{
    height: 32px;
    padding: 9px 7px;
    border: 1px solid $pagination-border-color;
    vertical-align: middle;
    text-align: center;
    background-color: #fff;
    color: #666;
    margin-left: 10px;

    &:focus{
      outline: none;
    }
  }

  .handler,
  .total,
  .size,
  .no-text,
  .page-text {
    @include inline-block(middle);
  }

  .no-text,
  .page-text {
    margin-left: 10px;
  }

  .selectric-wrapper {
    margin: 0 10px;
  }

  select,
  .selectric {
    border: 1px solid $pagination-border-color;
    width: 74px;
    padding: 6px 5px;

    .button {
      border-left: 1px solid $pagination-border-color;
    }

    .label {
      border: 0;
      padding: 0;
    }
  }
}
//
// Progresses
// ----------------------------------------------------------------------------------

.progress {

  ol {
    padding: 0;
    list-style: none;
    color: white;
    margin-bottom: 40px;

  }

  li {
    @include inline-block(middle);
    margin-left: -5px;
  }

  .progress-step {
    position: relative;
    text-align: center;

    .progress-step-number {
      @include inline-block();
      width: $progress-step-height;
      height: $progress-step-height;
      line-height: $progress-step-height;
      border-radius: 11.5px;
      background-color: #fff;
      font-size: 12px;
      border: 1px solid #d8d8d8;
      color: #ccc;
    }

    &.active {
      .progress-step-number {
        background-color: $progress-step-active-color;
        border: 1px solid $progress-step-active-color;
        color: #fff;
      }

      .progress-step-into {
        color: $progress-step-active-color;
      }
    }

    &.past {
      .progress-step-number {
        background-color: #fff;
        border: 1px solid $progress-step-active-color;
        color: $progress-step-active-color;

      }
      .icon-pokeball-gou {
        font-size: 10px;
        height: 12px;
        line-height: 8px;
      }

      .progress-step-into {
        color: $progress-step-color;
      }
    }

    .progress-step-into {
      position: absolute;
      @include inline-block(middle);
      width: $progress-step-into-width;
      color: $progress-step-color;
      left: ($progress-step-height - $progress-step-into-width)/2;
      top: $progress-step-height * 1.2;

      &.up {
        top: -25px;
      }
    }
  }

  .progress-bar {
    width: $progress-bar-width;
    height: $progress-bar-height;
    background-color: #c0c0c0;

    &.active {
      background-color: $progress-step-active-color;
    }
  }

  .progress-branch {
    position: absolute;

    .progress-branch-ol {
      padding: 0;
      margin: 0;
    }

    .progress-branch-bar {
      float: left;
      width: $progress-bar-height;
      height: 55px;
      margin-top: 20px;
      background-color: $progress-step-color;
      margin-left: -15px;
      margin-left: -11px\9;

      &.end {
        height: 55px;
        margin-left: -17px;
      }

      &.active {
        background-color: $progress-step-active-color;
      }
    }

    .progress-bar {
      margin-top: 67px;
      margin-left: -15px;
      margin-left: -10px\9;
      float: left;

      &.first {
        width: 150px;
        width: 140px\9;
      }
    }

    .progress-step {
      float: left;
      vertical-align: middle;
      margin-top: 58px;
    }
  }
}
.progress {
  .progress-step {

    .progress-step-into {
      width: auto;
      position: static;
      margin: 0 10px 0px 4px;
      vertical-align: middle;
    }
  }

  .progress-bar {
    height: 1px;
    margin-right: 10px;
  }
}
//
// Radio
// ----------------------------------------------------------------------------------

$radio-width: 14px !default;
$radio-height: 14px !default;
$radio-background-color: #fff !default;
$radio-border-color: $color-border !default;
$radio-border-radius: 1em !default;
$radio-hover-border-color: $color-primary !default;
$radio-disable-background-color: $color-border !default;
$radio-spacing: 8px;

input[type=radio].input-radio {
  @include inline-block(baseline);
  height: $radio-height;
  width: $radio-width;
  border-radius: $radio-border-radius;
  margin-right: $radio-spacing;
  position: relative;
  -webkit-appearance: none;
  appearance: none;

  &:before {
    border-radius: $radio-border-radius;
    height: $radio-height;
    width: $radio-width;
    border: 1px solid $radio-border-color;
    background-color: $radio-background-color;
    position: absolute;
    content: "";
  }

  &:hover {
    &:before {
      border: 1px solid $radio-hover-border-color;
    }
  }

  &:after {
    width: 6px;
    height: 6px;
    left: 4px;
    top: 4px;
    position: absolute;
    border-radius: 6px;
    content: "";
    background-color: $transparent;
  }

  &:checked {
    &:after {
      width: 6px;
      height: 6px;
      left: 4px;
      top: 4px;
      position: absolute;
      border-radius: 6px;
      content: "";
      background-color: $color-primary;
    }
  }

  &:focus {
    outline: none;
  }

  &.disabled,
  &[readonly],
  &[disabled],
  fieldset[disabled] & {
    cursor: not-allowed;
    pointer-events: none;

    &:checked {
      &:after {
        background-color: $radio-disable-background-color;
        pointer-events: none;
        cursor: not-allowed;
      }
    }

    &:hover {
      &:before {
        border: 1px solid $radio-border-color;
        pointer-events: none;
        cursor: not-allowed;
      }
    }
  }
}
//
// Selectric
// ----------------------------------------------------------------------------------

$selectric-spacing: 5px;
$selectric-border-width: 1px;

.selectric-wrapper {
  position: relative;
  cursor: pointer;
  text-align: left;
  @include inline-block(middle);
}

.selectric-responsive {
  width: 100%;
}

.selectric {
  border: $selectric-border-width solid $color-border;
  background: #fff;
  position: relative;
  width: 190px;
  padding: 6px 5px;
  border-radius: 0;

  &.selectric-mini {
    width: 64px;
  }

  .label {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 $selectric-spacing;
    line-height: 1.5em;
    height: 1.5em;
    color: $color-text;
  }

  .button {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 28px;
    height: 30px;
    color: $selectric-btn-color;
    text-align: center;
    font: 0/0 a;

    &:after {
      content: " ";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      width: 0;
      height: 0;
      border: 4px solid transparent;
      border-top-color: $color-text-assist;
      border-bottom: none;
    }
  }
}

.selectric-hover .selectric {
  border-color: $color-border;
}

.selectric-open {
  z-index: 9999;

  .selectric {
    border-color: $color-border;
  }

  .selectric-items {
    display: block;
  }
}

.selectric-disabled,
.selectric-readonly {
  filter: alpha(opacity=50);
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
  user-select: none;
}

.selectric-hide-select {
  position: relative;
  overflow: hidden;
  width: 0;
  height: 0;

  select {
    position: absolute;
    left: -100%;
    display: none;
  }
}

.selectric-input {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 1px !important;
  height: 1px !important;
  outline: none !important;
  border: none !important;
  *font: 0/0 a !important;
  background: none !important;
}

.selectric-temp-show {
  position: absolute !important;
  visibility: hidden !important;
  display: block !important;
}

/* Items box */
.selectric-items {
  display: none;
  position: absolute;
  top: 31px;
  left: 0;
  background-color: #fff;
  border: 1px solid $color-border;
  z-index: -1;
  box-shadow: 0 0 10px -6px;

  .selectric-scroll {
    height: 100%;
    overflow: auto;
  }

  .selectric-above & {
    top: auto;
    bottom: 100%;
  }

  ul, li {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 12px;
    line-height: 20px;
    min-height: 20px;
  }

  li {
    display: block;
    padding: 6px 10px;
    color: $color-text;
    cursor: pointer;

    &.selected {
      background: #EFEFEF;
      color: $color-text;
    }

    &:hover {
      background: #F0F0F0;
      color: $color-text;
    }
  }

  .disabled {
    filter: alpha(opacity=50);
    opacity: 0.5;
    cursor: default !important;
    background: none !important;
    color: #666 !important;
    user-select: none;
  }

  .selectric-group {
    .selectric-group-label {
      font-weight: bold;
      padding-left: 10px;
      cursor: default;
      user-select: none;
      background: none;
      color: $color-text;
    }

    &.disabled li {
      filter: alpha(opacity=100);
      opacity: 1;
    }

    li {
      padding-left: 25px;
    }
  }
}
.pb-loading-overlay {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  position: absolute;
  overflow: hidden;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.9);
  background-color: hsla(0,0%,100%,.9);

  .pb-loading-spin {
    width: 100%;
    height: 100%;
    position: relative;

    div {
      background-color: $color-primary !important;
    }
  }
}
//
// Switch
// ----------------------------------------------------------------------------------

.switch.checkbox {
  position: relative;
  display: inline-block;
  backface-visibility: hidden;
  outline: none;
  vertical-align: baseline;
  font-style: normal;
}

.switch.checkbox input[type="checkbox"] {
  cursor: pointer;
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0 !important;
  outline: none;
  z-index: 3;
}

.switch.checkbox label {
  cursor: auto;
  position: relative;
  display: block;
  padding-left: 40px;
  outline: none;
  min-height: 20px;
}

.switch.checkbox label:before {
  position: absolute;
  top: 0px;
  left: 0px;
  content: '';
  background: #ccd0d6;
  border-radius: 20px;
  transition: transform 0.1s ease;
}

.switch.checkbox label:after {
  position: absolute;
  font-size: 14px;
  top: 0px;
  left: 0px;
  text-align: center;
  opacity: 0;
  transition: transform 0.1s ease;
}

.switch.read-only.checkbox,
.switch.read-only.checkbox label {
  cursor: default;
}


.switch.disabled.checkbox label,
.switch.checkbox input[disabled] ~ label {
  cursor: default;
  opacity: 0.5;
  color: #000000;
}

.switch.checkbox input.hidden {
  z-index: -1;
}

.switch.checkbox input.hidden + label {
  cursor: pointer;
  user-select: none;
}

.switch.toggle.checkbox input {
  width: 36px;
  height: 20px;
}

.switch.toggle.checkbox label:before {
  display: block;
  position: absolute;
  content: '';
  z-index: 1;
  transform: none;
  border: none;
  background: #ccd0d6;
  width: 36px;
  height: 20px;
  border-radius: 20px;
}

.switch.toggle.checkbox label:after {
  background: #ffffff;
  position: absolute;
  content: '' !important;
  opacity: 1;
  z-index: 2;
  border: none;
  width: 14px;
  height: 14px;
  top: 3px;
  left: 3px;
  border-radius: 20px;
  transition: background 0.3s ease, left 0.3s ease;
}

.switch.toggle.checkbox input ~ label:after {
  left: 3px;
}
.switch.toggle.checkbox input:checked ~ label:before {
  background-color: #2dc12d;
}
.switch.toggle.checkbox input:checked ~ label:after {
  left: 18px;
}
//
// Tables
// ----------------------------------------------------------------------------------

.table {
  background-color: $table-background-color;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;

  thead {
    background-color: $thead-background-color;
    color: $thead-text-color;
  }

  td,
  th {
    height: $th-height;
    border: 0;
    margin: 0;
    font-weight: normal;
    vertical-align: middle;
    padding: $td-padding;
    text-align: left;
  }

  th{
    color: $color-text-note;
    border-left: 1px solid $thead-background-color;
    border-right: 1px solid $thead-background-color;
    border-bottom: 1px solid $table-border-color;
  }

  td {
    height: $td-height;
    color: $color-text-assist;
    border-bottom: 1px solid $table-border-color;
    vertical-align: middle;
    word-wrap: break-word;
  }

  td:first-child {
    border-left: 1px solid $table-border-color;
  }

  td:last-child,
  td.last {
    border-right: 1px solid $table-border-color;
  }

  tbody tr:hover {
    background-color: $tr-hover-background-color;
  }

  tbody tr:hover td,
  .tr-danger td{
    color: $td-hover-color;
  }

  thead {
    vertical-align: bottom;
  }
  .td-operation {
    text-align: right;
  }

  tfoot {
    background-color: $tfoot-background-color;
  }
}

.tr-danger {
  background-color: $tr-danger-background-color;
}

.th-checkbox {
  width: 25px;
  padding-left: 11px;
}

.table-horizontal {

  td{
    padding-top: 15px;
  }
}

.table-fixed {
  table-layout: fixed;

  td,
  th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.table-no-results {

  tbody tr:hover {
    background-color: $white;
  }
  td {
    line-height: 108px;
    text-align: center;
  }
}

.table-grid {

  tbody tr:hover {
    background-color: $white;
  }
  th,
  td {
    border: 1px solid $table-border-color;
  }
}
//
// Tabs
// ----------------------------------------------------------------------------------

.tab {
  .tab-navs {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      float: left;
      position: relative;
      margin-right: 3px;
      background-color: $tab-background-color;

      &.active {
        a {
          color: $tab-body-color;
          background-color: #fff;
          border-top: 3px solid $tab-li-color;
          border-left: 0;
          border-right: 0;
          padding: 9px 16px 12px;

          &:hover {
            color: $tab-body-color;
          }
        }
      }

      a {
        color: $tab-body-color;
        display: block;
        font-size: 12px;
        border-top-width: 0;
        border-left: 0;
        border-right: 0;
        padding: 12px 16px;
        background-color: rgba(255,255,255,.7);
        opacity: 70% \9;

        &:hover {
          color: $tab-primary-hover-color;
          background-color: #fff;
        }
      }

      .nav-note {
        @include inline-block(top);
        max-width: 24px;
        overflow: hidden;
        margin-left: 7px;
        color: $tab-primary-hover-color;

        &.show {
          color: #9b9b9b;
        }
      }
    }
  }

  .tab-contents {
    padding-top: 20px;
    background-color: #fff;

    .tab-content {
      @include min-height(100px);
    }
  }
}

.tab-condensed {
  .tab-navs {

    li {
      margin-bottom: -1px;

      &.active {
        a {
          border-bottom: 0;
          padding: 3px 16px 6px;
        }
      }

      a {
        font-size: 12px;
        border-width: 0;
        border-top-width: 0;
        padding: 6px 16px;
      }
    }
  }
}

.tab-reversed {
  .tab-navs {
    background-color: transparent;
    border-bottom: 2px solid $tab-li-color;

    li {
      margin-bottom: 0;

      &.active {
        a {
          color: #fff;
          border-color: $tab-li-color;
          background-color: $tab-li-color;

          &:hover {
            color: #fff;
          }

        }
      }
    }

    a {
      background-color: transparent;
    }
  }
}
//
// Timelines
// ----------------------------------------------------------------------------------

@mixin timeline-transition {
  content: "";
  position: absolute;
  border: 1px dashed $color-border;
  border-top: 0;
  border-bottom: 0;
  height: 99px;
  display: block;
  left: 1px;
}

.timeline {
  td {
    overflow: hidden;
    height: 40px;
    padding: 10px;

    &.first {
      padding: 0;
    }
  }

  .point {
    @include inline-block(baseline);
    position: relative;
    border-radius: 10px;
    border: 2px solid #ccd0d6;
    width: 8px;
    height: 8px;

    &.success, &.error, &.info {
      &:before, &:after {
        border-style: solid;
        border-color: $color-border;

      }
    }

    &.success {
      background-color: #2dc12d;
      border-color: #2dc12d;
    }

    &.error {
      background-color: #ff2200;
      border-color: #ff2200;
    }

    &.info {
      background-color: #4c97ff;
      border-color: #4c97ff;
    }

    &.current {
      &:after {
        border-style: dashed;
        border-color: #ccd0d6;
      }
    }

    &.first {
      &:before {
        visibility: hidden;
      }
    }

    &.last {
      &:after {
        visibility: hidden;
      }
    }

    &:before {
      @include timeline-transition();
      top: -101px;
    }

    &:after {
      @include timeline-transition();
      top: 6px;
    }
  }
}
//
// Tooltip
// ----------------------------------------------------------------------------------

[class*="hint--"] {
  position: relative;
  display: inline-block;
  /**
	 * tooltip arrow
	 */
  /**
	 * tooltip body
	 */ }
  [class*="hint--"]:before, [class*="hint--"]:after {
    position: absolute;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: hidden;
    opacity: 0;
    z-index: 1000000;
    pointer-events: none;
    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    transition: 0.3s ease;
    -webkit-transition-delay: 0ms;
    -moz-transition-delay: 0ms;
    transition-delay: 0ms; }
  [class*="hint--"]:hover:before, [class*="hint--"]:hover:after {
    visibility: visible;
    opacity: 1; }
  [class*="hint--"]:hover:before, [class*="hint--"]:hover:after {
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    transition-delay: 100ms; }
  [class*="hint--"]:before {
    content: '';
    position: absolute;
    background: transparent;
    border: 6px solid transparent;
    z-index: 1000001; }
  [class*="hint--"]:after {
    background: #383838;
    color: white;
    padding: 8px 10px;
    font-size: 12px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 12px;
    white-space: nowrap; }
  [class*="hint--"][aria-label]:after {
    content: attr(aria-label); }
  [class*="hint--"][data-hint]:after {
    content: attr(data-hint); }

[aria-label='']:before, [aria-label='']:after,
[data-hint='']:before,
[data-hint='']:after {
  display: none !important; }

/**
 * source: hint-position.scss
 *
 * Defines the positoning logic for the tooltips.
 *
 * Classes added:
 * 	1) hint--top
 * 	2) hint--bottom
 * 	3) hint--left
 * 	4) hint--right
 */
/**
 * set default color for tooltip arrows
 */
.hint--top-left:before {
  border-top-color: #383838; }

.hint--top-right:before {
  border-top-color: #383838; }

.hint--top:before {
  border-top-color: #383838; }

.hint--bottom-left:before {
  border-bottom-color: #383838; }

.hint--bottom-right:before {
  border-bottom-color: #383838; }

.hint--bottom:before {
  border-bottom-color: #383838; }

.hint--left:before {
  border-left-color: #383838; }

.hint--right:before {
  border-right-color: #383838; }

/**
 * top tooltip
 */
.hint--top:before {
  margin-bottom: -11px; }

.hint--top:before, .hint--top:after {
  bottom: 100%;
  left: 50%; }

.hint--top:before {
  left: calc(50% - 6px); }

.hint--top:after {
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  transform: translateX(-50%); }

.hint--top:hover:before, .hint--top:focus:before {
  -webkit-transform: translateY(-8px);
  -moz-transform: translateY(-8px);
  transform: translateY(-8px); }

.hint--top:hover:after, .hint--top:focus:after {
  -webkit-transform: translateX(-50%) translateY(-8px);
  -moz-transform: translateX(-50%) translateY(-8px);
  transform: translateX(-50%) translateY(-8px); }

/**
 * bottom tooltip
 */
.hint--bottom:before {
  margin-top: -11px; }

.hint--bottom:before, .hint--bottom:after {
  top: 100%;
  left: 50%; }

.hint--bottom:before {
  left: calc(50% - 6px); }

.hint--bottom:after {
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  transform: translateX(-50%); }

.hint--bottom:hover:before, .hint--bottom:focus:before {
  -webkit-transform: translateY(8px);
  -moz-transform: translateY(8px);
  transform: translateY(8px); }

.hint--bottom:hover:after, .hint--bottom:focus:after {
  -webkit-transform: translateX(-50%) translateY(8px);
  -moz-transform: translateX(-50%) translateY(8px);
  transform: translateX(-50%) translateY(8px); }

/**
 * right tooltip
 */
.hint--right:before {
  margin-left: -11px;
  margin-bottom: -6px; }

.hint--right:after {
  margin-bottom: -14px; }

.hint--right:before, .hint--right:after {
  left: 100%;
  bottom: 50%; }

.hint--right:hover:before, .hint--right:focus:before {
  -webkit-transform: translateX(8px);
  -moz-transform: translateX(8px);
  transform: translateX(8px); }

.hint--right:hover:after, .hint--right:focus:after {
  -webkit-transform: translateX(8px);
  -moz-transform: translateX(8px);
  transform: translateX(8px); }

/**
 * left tooltip
 */
.hint--left:before {
  margin-right: -11px;
  margin-bottom: -6px; }

.hint--left:after {
  margin-bottom: -14px; }

.hint--left:before, .hint--left:after {
  right: 100%;
  bottom: 50%; }

.hint--left:hover:before, .hint--left:focus:before {
  -webkit-transform: translateX(-8px);
  -moz-transform: translateX(-8px);
  transform: translateX(-8px); }

.hint--left:hover:after, .hint--left:focus:after {
  -webkit-transform: translateX(-8px);
  -moz-transform: translateX(-8px);
  transform: translateX(-8px); }

/**
 * top-left tooltip
 */
.hint--top-left:before {
  margin-bottom: -11px; }

.hint--top-left:before, .hint--top-left:after {
  bottom: 100%;
  left: 50%; }

.hint--top-left:before {
  left: calc(50% - 6px); }

.hint--top-left:after {
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  transform: translateX(-100%); }

.hint--top-left:after {
  margin-left: 12px; }

.hint--top-left:hover:before, .hint--top-left:focus:before {
  -webkit-transform: translateY(-8px);
  -moz-transform: translateY(-8px);
  transform: translateY(-8px); }

.hint--top-left:hover:after, .hint--top-left:focus:after {
  -webkit-transform: translateX(-100%) translateY(-8px);
  -moz-transform: translateX(-100%) translateY(-8px);
  transform: translateX(-100%) translateY(-8px); }

/**
 * top-right tooltip
 */
.hint--top-right:before {
  margin-bottom: -11px; }

.hint--top-right:before, .hint--top-right:after {
  bottom: 100%;
  left: 50%; }

.hint--top-right:before {
  left: calc(50% - 6px); }

.hint--top-right:after {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  transform: translateX(0); }

.hint--top-right:after {
  margin-left: -12px; }

.hint--top-right:hover:before, .hint--top-right:focus:before {
  -webkit-transform: translateY(-8px);
  -moz-transform: translateY(-8px);
  transform: translateY(-8px); }

.hint--top-right:hover:after, .hint--top-right:focus:after {
  -webkit-transform: translateY(-8px);
  -moz-transform: translateY(-8px);
  transform: translateY(-8px); }

/**
 * bottom-left tooltip
 */
.hint--bottom-left:before {
  margin-top: -11px; }

.hint--bottom-left:before, .hint--bottom-left:after {
  top: 100%;
  left: 50%; }

.hint--bottom-left:before {
  left: calc(50% - 6px); }

.hint--bottom-left:after {
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  transform: translateX(-100%); }

.hint--bottom-left:after {
  margin-left: 12px; }

.hint--bottom-left:hover:before, .hint--bottom-left:focus:before {
  -webkit-transform: translateY(8px);
  -moz-transform: translateY(8px);
  transform: translateY(8px); }

.hint--bottom-left:hover:after, .hint--bottom-left:focus:after {
  -webkit-transform: translateX(-100%) translateY(8px);
  -moz-transform: translateX(-100%) translateY(8px);
  transform: translateX(-100%) translateY(8px); }

/**
 * bottom-right tooltip
 */
.hint--bottom-right:before {
  margin-top: -11px; }

.hint--bottom-right:before, .hint--bottom-right:after {
  top: 100%;
  left: 50%; }

.hint--bottom-right:before {
  left: calc(50% - 6px); }

.hint--bottom-right:after {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  transform: translateX(0); }

.hint--bottom-right:after {
  margin-left: -12px; }

.hint--bottom-right:hover:before, .hint--bottom-right:focus:before {
  -webkit-transform: translateY(8px);
  -moz-transform: translateY(8px);
  transform: translateY(8px); }

.hint--bottom-right:hover:after, .hint--bottom-right:focus:after {
  -webkit-transform: translateY(8px);
  -moz-transform: translateY(8px);
  transform: translateY(8px); }

/**
 * source: hint-sizes.scss
 *
 * Defines width restricted tooltips that can span
 * across multiple lines.
 *
 * Classes added:
 * 	1) hint--small
 * 	2) hint--medium
 * 	3) hint--large
 *
 */
.hint--small:after,
.hint--medium:after,
.hint--large:after {
  white-space: normal;
  line-height: 1.4em; }

.hint--small:after {
  width: 80px; }

.hint--medium:after {
  width: 150px; }

.hint--large:after {
  width: 300px; }

/**
 * source: hint-theme.scss
 *
 * Defines basic theme for tooltips.
 *
 */
[class*="hint--"] {
  /**
	 * tooltip body
	 */ }
  [class*="hint--"]:after {
    text-shadow: 0 -1px 0px black;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); }

/**
 * source: hint-color-types.scss
 *
 * Contains tooltips of various types based on color differences.
 *
 * Classes added:
 * 	1) hint--error
 * 	2) hint--warning
 * 	3) hint--info
 * 	4) hint--success
 *
 */
/**
 * Error
 */
.hint--error:after {
  background-color: #b34e4d;
  text-shadow: 0 -1px 0px #592726; }

.hint--error.hint--top-left:before {
  border-top-color: #b34e4d; }

.hint--error.hint--top-right:before {
  border-top-color: #b34e4d; }

.hint--error.hint--top:before {
  border-top-color: #b34e4d; }

.hint--error.hint--bottom-left:before {
  border-bottom-color: #b34e4d; }

.hint--error.hint--bottom-right:before {
  border-bottom-color: #b34e4d; }

.hint--error.hint--bottom:before {
  border-bottom-color: #b34e4d; }

.hint--error.hint--left:before {
  border-left-color: #b34e4d; }

.hint--error.hint--right:before {
  border-right-color: #b34e4d; }

/**
 * Warning
 */
.hint--warning:after {
  background-color: #c09854;
  text-shadow: 0 -1px 0px #6c5328; }

.hint--warning.hint--top-left:before {
  border-top-color: #c09854; }

.hint--warning.hint--top-right:before {
  border-top-color: #c09854; }

.hint--warning.hint--top:before {
  border-top-color: #c09854; }

.hint--warning.hint--bottom-left:before {
  border-bottom-color: #c09854; }

.hint--warning.hint--bottom-right:before {
  border-bottom-color: #c09854; }

.hint--warning.hint--bottom:before {
  border-bottom-color: #c09854; }

.hint--warning.hint--left:before {
  border-left-color: #c09854; }

.hint--warning.hint--right:before {
  border-right-color: #c09854; }

/**
 * Info
 */
.hint--info:after {
  background-color: #3986ac;
  text-shadow: 0 -1px 0px #1a3c4d; }

.hint--info.hint--top-left:before {
  border-top-color: #3986ac; }

.hint--info.hint--top-right:before {
  border-top-color: #3986ac; }

.hint--info.hint--top:before {
  border-top-color: #3986ac; }

.hint--info.hint--bottom-left:before {
  border-bottom-color: #3986ac; }

.hint--info.hint--bottom-right:before {
  border-bottom-color: #3986ac; }

.hint--info.hint--bottom:before {
  border-bottom-color: #3986ac; }

.hint--info.hint--left:before {
  border-left-color: #3986ac; }

.hint--info.hint--right:before {
  border-right-color: #3986ac; }

/**
 * Success
 */
.hint--success:after {
  background-color: #458746;
  text-shadow: 0 -1px 0px #1a321a; }

.hint--success.hint--top-left:before {
  border-top-color: #458746; }

.hint--success.hint--top-right:before {
  border-top-color: #458746; }

.hint--success.hint--top:before {
  border-top-color: #458746; }

.hint--success.hint--bottom-left:before {
  border-bottom-color: #458746; }

.hint--success.hint--bottom-right:before {
  border-bottom-color: #458746; }

.hint--success.hint--bottom:before {
  border-bottom-color: #458746; }

.hint--success.hint--left:before {
  border-left-color: #458746; }

.hint--success.hint--right:before {
  border-right-color: #458746; }

/**
 * source: hint-always.scss
 *
 * Defines a persisted tooltip which shows always.
 *
 * Classes added:
 * 	1) hint--always
 *
 */
.hint--always:after, .hint--always:before {
  opacity: 1;
  visibility: visible; }

.hint--always.hint--top:before {
  -webkit-transform: translateY(-8px);
  -moz-transform: translateY(-8px);
  transform: translateY(-8px); }

.hint--always.hint--top:after {
  -webkit-transform: translateX(-50%) translateY(-8px);
  -moz-transform: translateX(-50%) translateY(-8px);
  transform: translateX(-50%) translateY(-8px); }

.hint--always.hint--top-left:before {
  -webkit-transform: translateY(-8px);
  -moz-transform: translateY(-8px);
  transform: translateY(-8px); }

.hint--always.hint--top-left:after {
  -webkit-transform: translateX(-100%) translateY(-8px);
  -moz-transform: translateX(-100%) translateY(-8px);
  transform: translateX(-100%) translateY(-8px); }

.hint--always.hint--top-right:before {
  -webkit-transform: translateY(-8px);
  -moz-transform: translateY(-8px);
  transform: translateY(-8px); }

.hint--always.hint--top-right:after {
  -webkit-transform: translateY(-8px);
  -moz-transform: translateY(-8px);
  transform: translateY(-8px); }

.hint--always.hint--bottom:before {
  -webkit-transform: translateY(8px);
  -moz-transform: translateY(8px);
  transform: translateY(8px); }

.hint--always.hint--bottom:after {
  -webkit-transform: translateX(-50%) translateY(8px);
  -moz-transform: translateX(-50%) translateY(8px);
  transform: translateX(-50%) translateY(8px); }

.hint--always.hint--bottom-left:before {
  -webkit-transform: translateY(8px);
  -moz-transform: translateY(8px);
  transform: translateY(8px); }

.hint--always.hint--bottom-left:after {
  -webkit-transform: translateX(-100%) translateY(8px);
  -moz-transform: translateX(-100%) translateY(8px);
  transform: translateX(-100%) translateY(8px); }

.hint--always.hint--bottom-right:before {
  -webkit-transform: translateY(8px);
  -moz-transform: translateY(8px);
  transform: translateY(8px); }

.hint--always.hint--bottom-right:after {
  -webkit-transform: translateY(8px);
  -moz-transform: translateY(8px);
  transform: translateY(8px); }

.hint--always.hint--left:before {
  -webkit-transform: translateX(-8px);
  -moz-transform: translateX(-8px);
  transform: translateX(-8px); }

.hint--always.hint--left:after {
  -webkit-transform: translateX(-8px);
  -moz-transform: translateX(-8px);
  transform: translateX(-8px); }

.hint--always.hint--right:before {
  -webkit-transform: translateX(8px);
  -moz-transform: translateX(8px);
  transform: translateX(8px); }

.hint--always.hint--right:after {
  -webkit-transform: translateX(8px);
  -moz-transform: translateX(8px);
  transform: translateX(8px); }

/**
 * source: hint-rounded.scss
 *
 * Defines rounded corner tooltips.
 *
 * Classes added:
 * 	1) hint--rounded
 *
 */
.hint--rounded:after {
  border-radius: 4px; }

/**
 * source: hint-effects.scss
 *
 * Defines various transition effects for the tooltips.
 *
 * Classes added:
 * 	1) hint--no-animate
 * 	2) hint--bounce
 *
 */
.hint--no-animate:before, .hint--no-animate:after {
  -webkit-transition-duration: 0ms;
  -moz-transition-duration: 0ms;
  transition-duration: 0ms; }

.hint--bounce:before, .hint--bounce:after {
  -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  -moz-transition: opacity 0.3s ease, visibility 0.3s ease, -moz-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); }
/*!
 * Viewer v0.5.0
 * https://github.com/fengyuanchen/viewer
 *
 * Copyright (c) 2015-2016 Fengyuan Chen
 * Released under the MIT license
 *
 * Date: 2016-01-21T09:59:45.429Z
 */
.viewer-zoom-in:before,
.viewer-zoom-out:before,
.viewer-one-to-one:before,
.viewer-reset:before,
.viewer-prev:before,
.viewer-play:before,
.viewer-next:before,
.viewer-rotate-left:before,
.viewer-rotate-right:before,
.viewer-flip-horizontal:before,
.viewer-flip-vertical:before,
.viewer-fullscreen:before,
.viewer-fullscreen-exit:before,
.viewer-close:before {
  font-size: 0;
  line-height: 0;

  display: block;

  width: 20px;
  height: 20px;

  color: transparent;
  background-image: url('');
  background-repeat: no-repeat;
}

.viewer-zoom-in:before {
  content: 'Zoom In';

  background-position: 0 0;
}

.viewer-zoom-out:before {
  content: 'Zoom Out';

  background-position: -20px 0;
}

.viewer-one-to-one:before {
  content: 'One to One';

  background-position: -40px 0;
}

.viewer-reset:before {
  content: 'Reset';

  background-position: -60px 0;
}

.viewer-prev:before {
  content: 'Previous';

  background-position: -80px 0;
}

.viewer-play:before {
  content: 'Play';

  background-position: -100px 0;
}

.viewer-next:before {
  content: 'Next';

  background-position: -120px 0;
}

.viewer-rotate-left:before {
  content: 'Rotate Left';

  background-position: -140px 0;
}

.viewer-rotate-right:before {
  content: 'Rotate Right';

  background-position: -160px 0;
}

.viewer-flip-horizontal:before {
  content: 'Flip Horizontal';

  background-position: -180px 0;
}

.viewer-flip-vertical:before {
  content: 'Flip Vertical';

  background-position: -200px 0;
}

.viewer-fullscreen:before {
  content: 'Enter Full Screen';

  background-position: -220px 0;
}

.viewer-fullscreen-exit:before {
  content: 'Exit Full Screen';

  background-position: -240px 0;
}

.viewer-close:before {
  content: 'Close';

  background-position: -260px 0;
}

.viewer-container {
  font-size: 0;
  line-height: 0;

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  overflow: hidden;

  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;

  background-color: #000;
  background-color: rgba(0, 0, 0, .5);

  direction: ltr !important;
  -ms-touch-action: none;
      touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.viewer-container::-moz-selection,
.viewer-container *::-moz-selection {
  background-color: transparent;
}
.viewer-container::selection,
.viewer-container *::selection {
  background-color: transparent;
}
.viewer-container img {
  display: block;

  width: 100%;
  min-width: 0 !important;
  max-width: none !important;
  height: auto;
  min-height: 0 !important;
  max-height: none !important;
}

.viewer-canvas {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  overflow: hidden;
}
.viewer-canvas > img {
  width: auto;
  max-width: 90% !important;
  height: auto;
  margin: 15px auto;
}

.viewer-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;

  overflow: hidden;

  text-align: center;
}

.viewer-navbar {
  overflow: hidden;

  background-color: #000;
  background-color: rgba(0, 0, 0, .5);
}

.viewer-list {
  overflow: hidden;

  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  height: 50px;
  margin: 0;
  padding: 1px 0;
}
.viewer-list > li {
  font-size: 0;
  line-height: 0;

  float: left;
  overflow: hidden;

  width: 30px;
  height: 50px;

  cursor: pointer;

  opacity: .5;
  color: transparent;

  filter: alpha(opacity=50);
}
.viewer-list > li + li {
  margin-left: 1px;
}
.viewer-list > .viewer-active {
  opacity: 1;

  filter: alpha(opacity=100);
}

.viewer-player {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  display: none;

  cursor: none;

  background-color: #000;
}
.viewer-player > img {
  position: absolute;
  top: 0;
  left: 0;
}

.viewer-toolbar {
  overflow: hidden;

  width: 280px;
  margin: 0 auto 5px;
  padding: 3px 0;
}
.viewer-toolbar > li {
  float: left;
  overflow: hidden;

  width: 24px;
  height: 24px;

  cursor: pointer;

  border-radius: 50%;
  background-color: #000;
  background-color: rgba(0, 0, 0, .5);
}
.viewer-toolbar > li:hover {
  background-color: #000;
  background-color: rgba(0, 0, 0, .8);
}
.viewer-toolbar > li:before {
  margin: 2px;
}
.viewer-toolbar > li + li {
  margin-left: 1px;
}
.viewer-toolbar > .viewer-play {
  width: 30px;
  height: 30px;
  margin-top: -3px;
  margin-bottom: -3px;
}
.viewer-toolbar > .viewer-play:before {
  margin: 5px;
}

.viewer-tooltip {
  font-size: 12px;
  line-height: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  display: none;

  width: 50px;
  height: 20px;
  margin-top: -10px;
  margin-left: -25px;

  text-align: center;

  color: #fff;
  border-radius: 10px;
  background-color: #000;
  background-color: rgba(0, 0, 0, .8);
}

.viewer-title {
  font-size: 12px;
  line-height: 1;

  display: inline-block;
  overflow: hidden;

  max-width: 90%;
  margin: 0 5% 5px;

  white-space: nowrap;
  text-overflow: ellipsis;

  opacity: .8;
  color: #ccc;

  filter: alpha(opacity=80);
}
.viewer-title:hover {
  opacity: 1;

  filter: alpha(opacity=100);
}

.viewer-button {
  position: absolute;
  top: -40px;
  right: -40px;

  overflow: hidden;

  width: 80px;
  height: 80px;

  cursor: pointer;

  border-radius: 50%;
  background-color: #000;
  background-color: rgba(0, 0, 0, .5);
}
.viewer-button:before {
  position: absolute;
  bottom: 15px;
  left: 15px;
}

.viewer-fixed {
  position: fixed;
}

.viewer-open {
  overflow: hidden;
}

.viewer-show {
  display: block;
}

.viewer-hide {
  display: none;
}

.viewer-invisible {
  visibility: hidden;
}

.viewer-move {
  cursor: move;
  cursor: -webkit-grab;
  cursor:    -moz-grab;
  cursor:         grab;
}

.viewer-fade {
  opacity: 0;

  filter: alpha(opacity=0);
}

.viewer-in {
  opacity: 1;

  filter: alpha(opacity=100);
}

.viewer-transition {
  -webkit-transition: all .3s ease-out;
       -o-transition: all .3s ease-out;
          transition: all .3s ease-out;
}

@media (max-width: 767px) {
  .viewer-hide-xs-down {
    display: none;
  }
}

@media (max-width: 991px) {
  .viewer-hide-sm-down {
    display: none;
  }
}

@media (max-width: 1199px) {
  .viewer-hide-md-down {
    display: none;
  }
}
//
// Zoom
// ----------------------------------------------------------------------------------

.zoom {
  display: block;
  position: relative;

  .shade {
    display: block;
    position: absolute;
    cursor: move;
    @include opacity(0.6);
    background-color: $color-background;
    border: 1px solid $color-border;
  }

  .magnifier {
    display: block;
    position: absolute;
    top: -1px;
    z-index: 10;
    overflow: hidden;
    background-color: $color-background;
    border: 1px solid $color-border;

    img {
      display: block;
      position: absolute;
    }
  }
}
